<template>
	<div>
		<div class="head2">
			<div style="display: flex;">
				<router-link to="/moblie/mysecret">
					<img src="../../assets/img/mobile/返回.png" style="width: 2rem;">
				</router-link>
				<h3> <i class="el-icon-notebook-2"></i>&nbsp;请付款:</h3>
				<div class="mane" >
					{{order.amount}} &yen;
				</div>
			</div>
		</div>
		<div style="height: 2px; background-color:  #ff4e00; margin-bottom: 2px ; margin-top: 2%;"></div>
		<div class="DINGD" >
			<table width="100%">
				<tr>
					<td style="width: 3%;">&nbsp;订单号:&nbsp;</td>
					<td style="width: 5%; border: 1px solid;">{{order.ordid}}</td>
				</tr>
				<tr>
					<td style="width: 3%;">&nbsp;价格:&nbsp;</td>
					<td style="width: 5%;  border: 1px solid;">{{order.amount}}</td>
				</tr>
				<tr>
					<td style="width: 3%;">&nbsp;姓名:&nbsp;</td>
					<td style="width: 5%; border: 1px solid;">{{order.ship2name}}</td>
				</tr>
				<tr>
					<td style="width: 3%;">&nbsp;电话:&nbsp;</td>
					<td style="width: 5%;border: 1px solid;">{{order.ship2phone}}</td>
				</tr>
				<tr>
					<td style="width: 3%;">&nbsp;地址:&nbsp;</td>
					<td style="width: 20%;border: 1px solid;">{{order.ship2addr}}</td>
				</tr>
				<tr>
					<td style="width: 5%;">&nbsp;状态:&nbsp;</td>
					<td>
						<el-button size="small" type="success" v-show="order.payStatus==1" style="width: 80%;">
							已经付款</el-button>
						<el-button size="small" type="danger" v-show="order.payStatus==0" @click="go2Pay()"
							style="width: 80%;">
							未付款, 点击这里去付款</el-button>
					</td>
				</tr>
			</table>
		</div>


		<hr>
		<div class="dingdxq" >
			<h3>订单详情</h3>
		</div>
		<el-table :data="itemInfo" border >
			<el-table-column label="图片" >
				<template slot-scope="scope">
					<div style="width: 5%;">
						<img :src="`http://127.0.0.1/api/public/showimg/${scope.row.picture}`"
							style="width: 5rem; height: 100%;margin-left: -2rem;" />
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="商品名称" >
			</el-table-column>
			<el-table-column prop="price" label="商品价钱" >
			</el-table-column>
			<el-table-column prop="num" label="商品数量">

			</el-table-column>
			<el-table-column label="商品总价">
				<template slot-scope="scope">
					<div>{{scope.row.price*scope.row.num}}</div>
				</template>
			</el-table-column>
			<el-table-column label="商品库存">
				<template slot-scope="scope">
					<div style=" color: #F56C6C;">{{scope.row.stock}}</div>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog :title="`支付金额: ${amt} 元`" :visible.sync="bshow" width="60%" center>
			<div style=" display: flxe; justify-content: center;">
				<div style="width: 30vh; height: 30vh;">
					<!-- <img src="../../../assets/img/pc/支付.jpg" style="width: 100%; height: 100%;" /> -->
						<img src="../../assets/img/pc/支付.jpg" style="width: 80%; height: 85%;"/>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="bshow = false">取消</el-button>
				<el-button type="danger" @click="doPay">确认支付</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'Mypayment',
		data() {
			return {
				order: {
					payStatus: 0,
					items: []
				},
				itemInfo: [],
				amt: 0.0,
				bshow: false
			}
		},
		methods: { //处理函数
			go2Pay() {
				this.bshow = true;
			},
			doPay() {
				this.bshow = false;
				this.$postx("/api/fore/ord/addPay/" + this.order.ordid)
					.then(resp => {
						//刷新订单信息
						this.$get("/api/fore/ord/findByOrdid/" + this.order.ordid)
							.then(resp => {
								this.order = resp.data.data;
							})
						// this.$alert("支付成功...");
						this.$alert('已经支付成功， 等待发货....', {
							confirmButtonText: '确定',
							type: 'warning'
						})
					})
			}
		},
		mounted() {
			///api/fore/ord/findInfoByOrdid/{ordid}  查找该登录用户的下某一个订单号
			let ordid = this.$route.query.ordid; //从组件中获取 ordid
			console.log(ordid);
			console.log(this.$route.query.ordid);
			this.amt = 0.0;
			this.$get("/api/fore/ord/findByOrdid/" + ordid)
				.then(resp => {
					this.order = resp.data.data;
					console.log(this.order)
					for (let i = 0; i < this.order.items.length; i++) {
						let itm = {}
						//订单明细
						let item = this.order.items[i]; 
						itm.bookid = item.book.id;
						itm.stock = item.book.stock;
						itm.num = item.num;
						itm.price = item.price;
						itm.ordid = item.ordid;
						itm.name = item.book.name;
						itm.picture = item.book.pic;
						this.amt = this.amt + itm.num * itm.price;
						this.itemInfo.push(itm);
					}
				})
		}
	}
</script>

<style scoped>
	.mane{
		min-width:80px;
		text-align: right; 
		font-size: 1.4em; 
		font-weight: 800; 
		color: #F56C6C;
	}
	.DINGD{
		line-height: 36px; 
		border-left: 3px lightblue solid;
	}
	.dingdxq{
		line-height: 36px; 
		border-left: 3px lightblue solid;
	}
</style>